<template>
	<view class="feedback_page">
		<view class="re">
			<image src="@/static/images/banner_05.png" class="wp100" mode="widthFix"></image>
		</view>
		<view class="re pl32 pr32" style="margin-top: -122rpx;">
			
			<view class="feedback_area_block_1">
				<view class="fs32 lh40 fwb cor_333">来源选择</view>
				<view class="source_tags_list">
					<view class="item_source" :class="item.checked ? 'active' : ''" v-for="(item, index) in sourceData" :key="index">{{item.name}}</view>
				</view>
			</view>
			
			<view class="mt24 feedback_area_block_1">
				<view class="fs32 lh40 fwb cor_333">问题描述</view>
				<view class="mt20"><textarea class="textarea_01" placeholder="请详细描述您所遇到的问题或建议" placeholder-style="color: #666"></textarea></view>
				<view class="df">
					<view class="re mr20">
						<image src="@/static/images/icon_close_1.png" class="delete_btn_pos"></image>
						<image src="@/static/images/banner_01.png" class="file_pic_size"></image>
					</view>
					<view class="re mr20">
						<image src="@/static/images/icon_close_1.png" class="delete_btn_pos"></image>
						<image src="@/static/images/banner_01.png" class="file_pic_size"></image>
					</view>
					<view class="file_btn_box"><image src="@/static/images/icon_05.png" class="img_6"></image></view>
				</view>
				<view class="mt10 fs24 lh40 cor_666">最多可上传3张，图片不能超过2MB</view>
			</view>
			
			<view class="mt24 feedback_area_block_2">
				<view class="flex_box aic">
					<view class="fs28 fwb cor_333 mr32">您的联系方式</view>
					<view class="item ov">
						<input type="text" class="ipt_01" placeholder-style="color: #999" placeholder="手机号/QQ/邮箱，以便我们赠送您积分~" />
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	
	import {ref, reactive} from 'vue';
	import { onLoad, onShow, onPageScroll } from "@dcloudio/uni-app";
	
	const sourceData = ref([
		{ id: 0, name: '功能异常', checked: true },
		{ id: 1, name: '功能建议', checked: false },
		{ id: 2, name: '体验问题', checked: false },
		{ id: 3, name: '功能异常', checked: false },
		{ id: 4, name: '功能建议', checked: false },
		{ id: 5, name: '体验问题', checked: false }
		
		
	])
	
</script>

<style lang="scss" scoped>
	
	.feedback_page {
		position: relative;
		min-height: 100vh;
		background-color: #f6f6f6;
		padding-bottom: calc(20rpx + content(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		.feedback_area_block_1 {
			position: relative;
			padding: 40rpx 32rpx 48rpx;
			background: #fff;
			border-radius: 16rpx;
			.source_tags_list {
				position: relative;
				display: flex;
				flex-wrap: wrap;
				margin-left: -28rpx;
				.item_source {
					position: relative;
					width: 188rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					font-size: 28rpx;
					color: #333;
					border-radius: 8rpx;
					border: 1px solid #f0f0f0;
					margin-top: 28rpx;
					margin-left: 28rpx;
					&.active {
						color: #fff;
						font-weight: bold;
						background-color: #F5220F;
						border-color: #F5220F;
					}
				}
			}
			.textarea_01 {
				position: relative;
				display: inline-block;
				padding: 12rpx 0;
				width: 100%;
				height: 280rpx;
				font-size: 28rpx;
				line-height: 40rpx;
				background: transparent;
				border-radius: 16rpx;
				outline: none;
				border: 0;
			}
		}
		.file_pic_size {
			position: relative;
			width: 110rpx;
			height: 110rpx;
			border-radius: 8rpx;
		}
		.delete_btn_pos {
			position: absolute;
			top: -14rpx;
			right: -14rpx;
			width: 28rpx;
			height: 28rpx;
			z-index: 2;
		}
		.file_btn_box {
			position: relative;
			width: 110rpx;
			height: 110rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #FAF5F5;
			border-radius: 8rpx;
		}
		.feedback_area_block_2 {
			position: relative;
			padding: 0 32rpx;
			background-color: #fff;
			border-radius: 16rpx;
			.ipt_01 {
				position: relative;
				display: inline-block;
				padding: 0;
				width: 100%;
				height: 104rpx;
				font-size: 24rpx;
				line-height: 104rpx;
				background: transparent;
				border-radius: 0;
				outline: none;
				border: 0;
				vertical-align: middle;
			}
		}
	}

</style>
